<template>
  <div class="app-container" style="padding-bottom: 20px;">
    <div class="toolbar">
      <el-button type="primary" icon="el-icon-refresh" size="mini" @click="getList">重新检查</el-button>
      <span v-if="version" style="margin-left: 20px; font-size: 14px;">当前版本：{{ version }}</span>
    </div>
    <el-table
      v-if="dataList && dataList.length > 0"
      :data="dataList"
      stripe
      size="medium"
      header-cell-class-name="bg-gray"
    >
      <el-table-column label="序号" type="index" :idnex="tableIndex" width="80" />
      <el-table-column prop="add_time" label="发布时间" width="200" />
      <el-table-column prop="version" label="版本号" width="120" />
      <el-table-column prop="content" label="更新内容">
        <template slot-scope="scope">
          <div v-html="scope.row.content" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.index > 1" type="text" size="mini" icon="el-icon-s-promotion" @click.native.prevent="doUpgrade(scope.row.version)">升级
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-else style="width: 100%; background-color: #f8f8f8; text-align: center; padding: 100px 0;">
      <span class="el-icon-circle-check" style="font-size: 48px; color:#06b306;" />
      <p style="color:#666;font-size: 16px;">已是最新版</p>
    </div>
  </div>
</template>

<script>
import { getList, doUpgrade } from '@/api/upgrade'

export default {
  data() {
    return {
      version: '',
      dataList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getList().then(res => {
        this.version = res.data.version
        this.dataList = res.data.list
      })
    },
    tableIndex(index) {
      return index + 1
    },
    doUpgrade(version) {
      doUpgrade({ version: version }).then(res => {
        this.getList()
        this.$message({
          message: res.message,
          type: 'success',
          duration: 1500
        })
      })
    }
  }
}
</script>
